<template>
  <v-container class="player-container" fluid grid-list-md>
    <v-layout row wrap class="px-0">
      <v-flex md12>
        <v-btn icon @click="$router.push('/player/players')">
          <v-icon>keyboard_backspace</v-icon>
        </v-btn>
        <span class="title">玩家 「{{playerItem.nickname}}」 的充值记录 ID:{{playerItem.lftid}}</span>
      </v-flex>
    </v-layout>
    <v-divider></v-divider>
    <v-layout row wrap>
      <v-flex d-flex>
        <v-flex md2 sm1 class="date-wrapper">
          <!-- 按时间查询 -->
          <v-menu offset-y>
            <v-btn depressed slot="activator">
              <v-icon>date_range</v-icon>
              <span>选择起始日期</span>
            </v-btn>
            <v-date-picker min="2017-05-14" :max="currentDate" landscape :first-day-of-week="0" locale="zh-cn" v-model="queryForm.fromTime"></v-date-picker>
          </v-menu>
          <span class="date-text">{{queryForm.fromTime}}</span>
        </v-flex>
        <v-flex md2 sm1 class="date-wrapper">
          <!-- 按时间查询 -->
          <v-menu offset-y>
            <v-btn depressed slot="activator">
              <v-icon>date_range</v-icon>
              <span>选择结束日期</span>
            </v-btn>
            <v-date-picker min="2017-05-14" :max="currentDate" landscape :first-day-of-week="0" locale="zh-cn" v-model="queryForm.toTime"></v-date-picker>
          </v-menu>
          <span class="date-text">{{queryForm.toTime}}</span>
        </v-flex>
        <v-flex md2 sm1 class="pb-3">
          <v-btn @click="search" dark color="blue">
            <v-icon>search</v-icon>
            搜索
          </v-btn>
        </v-flex>
      </v-flex>
    </v-layout>
    <v-data-table :loading="showProgress" :headers="topupHeaders" :items="topupData" hide-actions class="elevation-1">
      <v-progress-linear slot="progress" color="teal" height="5" indeterminate></v-progress-linear>
      <template slot="items" slot-scope="props">
        <td class="text-xs-center subheading">{{ props.item.proxyId }}</td>
        <td class="text-xs-center subheading">{{ props.item.price }}</td>
        <td class="text-xs-center subheading">{{ props.item.goods }}</td>
        <td class="text-xs-center subheading">{{ props.item.giveAway }}</td>
        <td class="text-xs-center subheading">{{ getTime(props.item.createTime) }}</td>
      </template>
      <!-- 没有数据时显示的提示 -->
      <template slot="no-data">
        <div class="text-md-center">
          <v-icon color="yellow darken-3">warning</v-icon>
          <span class="subheading">暂无数据</span>
        </div>
      </template>
    </v-data-table>
    <div class="text-xs-center my-2">
      <v-pagination @input="pageChange" circle :length="pagination.pageCount" :total-visible="pagination.totalVisible" v-model="pagination.page"></v-pagination>
    </div>
  </v-container>
</template>

<script>
import * as player from "../../api/player";
import { mapMutations, mapState } from "vuex";
import { getTime, getToday } from "../../util";
export default {
  data: () => ({
    showProgress: false,
    limit: 10,
    offset: 0,
    pagination: {
      page: 1,
      pageCount: 1,
      totalVisible: 7
    },
    form: {},
    queryForm: {
      fromTime: "",
      toTime: ""
    },
    tabs: null,
    topupData: [],
    uid: "",
    lftid: "",
    nickname: "",
    isSearch: false,
    currentDate: "",
    topupHeaders: [
      { text: "邀请码", value: "inviteCode", align: "center", sortable: false },
      {
        text: "充值额度",
        value: "totalTopup",
        align: "center",
        sortable: false
      },
      {
        text: "充值商品",
        value: "goods",
        align: "center",
        sortable: false
      },
      {
        text: "赠送钻石",
        value: "giveAway",
        align: "center",
        sortable: false
      },
      {
        text: "充值时间",
        value: "createTime",
        align: "center",
        sortable: false
      }
    ]
  }),
  mounted() {
    let params = this.$route.params;
    this.uid = params.id.replace(":", "");
    this.getPlayerTopup();
    this.currentDate = getToday();
    this.$nextTick(() => {
      $Vue.$off("refreshPage");
      $Vue.$on("refreshPage", () => {
        this.isSearch = false;
        this.offset = 0;
        this.queryForm.fromTime = "";
        this.queryForm.toTime = "";
        this.getPlayerTopup();
      });
    });
  },
  computed: {
    ...mapState(["playerItem"])
  },
  methods: {
    getTime,
    // 按时间搜索玩家充值记录
    getPlayerTopup(time) {
      let opt = {
        limit: this.limit,
        offset: this.offset,
        uid: this.uid
      };
      this.showProgress = true;
      if (time) {
        opt.fromTime = new Date(time.fromTime).getTime();
        opt.toTime = new Date(time.toTime).getTime();
        console.log(opt);
      }
      player.getPlayerTopup.r(opt).then(({ data }) => {
        if (data.result == 0) {
          this.topupData = data.data.dataList || [];
          this.pagination.pageCount = data.data.totalCount
            ? Math.ceil(data.data.totalCount / this.limit)
            : 1;
        } else {
          $Vue.$emit("toggleSnackbar", {
            text: "暂无数据"
          });
        }
        this.showProgress = false;
      });
    },
    initialize() {
      this.topupData = [
        {
          lftid: 103652,
          nickname: "昵称",
          totalTopup: 140,
          createTime: "2018-4-19",
          inviteCode: "522411"
        }
      ];
    },
    search(fromPage) {
      let form = {};
      _.forEach(this.queryForm, (item, key) => {
        item ? (form[key] = item) : void 0;
      });
      if (form.fromTime || form.toTime) {
        if (form.fromTime && form.toTime) {
          if (form.fromTime > form.toTime) {
            return $Vue.$emit("toggleSnackbar", {
              text: "起始日期不能早于结束日期"
            });
          }
          form.fromTime = new Date(form.fromTime + " 00:00:00").getTime();
          form.toTime = new Date(form.toTime + " 23:59:59").getTime();
        } else {
          return $Vue.$emit("toggleSnackbar", {
            text: "请选择完整起止日期"
          });
        }
      } else {
        return $Vue.$emit("toggleSnackbar", {
          text: "请选择起止日期"
        });
      }
      if (fromPage !== "wyvj") {
        this.offset = 0;
        this.pagination.page = 1;
      }
      console.log(form)
      this.getPlayerTopup(form);
      this.isSearch = true;
    },
    pageChange(page) {
      this.offset = (page - 1) * this.limit;
      if (!this.isSearch) {
        this.getPlayerTopup();
      } else {
        // ***
        this.search("wyvj");
      }
    }
  }
};
</script>

<style lang="less" scoped>
.date-wrapper {
  position: relative;
  .date-text {
    display: inline-block;
    width: 100px;
    height: 40%;
    border-bottom: 1px solid #909090;
    position: absolute;
    top: 18px;
    right: 0;
  }
}
</style>

